<template>
  <el-input
      v-model="input"
      style="width:100%"
      placeholder="Example: Translate this sentence into French: How are you?"
      clearable
  />
  <br>
  <br>
  <el-button class="ml-3" type="success" @click="handleClick">
    Try T5
  </el-button>
  <br>
  <br>
  <el-input
      v-model="output"
      style="width: 100%"
      :autosize="{ minRows: 7, maxRows: 14 }"
      type="textarea"
      placeholder="Output"
  />
</template>

<script setup>
import {ref} from 'vue'
import axios from "axios";
import FormData from "form-data";

const input = ref('')
const output = ref('')

function handleClick() {
  const FormData = require('form-data');
  let data = new FormData();
  data.append('text', input.value);
  let config = {
    method: 'post',
    maxBodyLength: Infinity,
    url: 'https://openapi.sophnet.com/bjriscv01/api/t5',
    headers: {},
    data : data
  };
  const intervalTime = 1000 * 5
  console.log(input.value)
  let intervalId = setInterval(() => {
    axios.request(config)
        .then((response) => {
          let data = response.data
          console.log(data)
          if (data.status === "done") {
            output.value = data.result
            clearInterval(intervalId)
          }
        })
        .catch((error) => {
          console.log(error);
        });
  }, intervalTime)
}
</script>

<style scoped lang="less">
</style>